import React from 'react';
import { Badge, NavBar, Icon, Progress, WhiteSpace, WingBlank, Modal } from 'antd-mobile';
import { TeamOutlined, LeftOutlined, HeartFilled, CrownFilled, PlusOutlined, WomanOutlined, EyeOutlined, FormOutlined,UserOutlined } from '@ant-design/icons';
import ContentCard from '../../components/contentCard/index'
import MyBadge from '../../components/myBadge/index'
import AppPage from '../../container/AppPage'
import { Avatar } from 'antd'
import './userDtl.css'
import { Link } from 'react-router-dom';
function closest(el, selector) {
    const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector;
    while (el) {
        if (matchesSelector.call(el, selector)) {
            return el;
        }
        el = el.parentElement;
    }
    return null;
}
export default class TabBar extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            percent: 60,
            modal1: false
        }
    }
    showModal = key => (e) => {
        e.preventDefault(); // 修复 Android 上点击穿透
        this.setState({
            [key]: true,
        });
    }
    onClose = key => () => {
        this.setState({
            [key]: false,
        });
    }

    onWrapTouchStart = (e) => {
        // fix touch to scroll background page on iOS
        if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
            return;
        }
        const pNode = closest(e.target, '.am-modal-content');
        if (!pNode) {
            e.preventDefault();
        }
    }
    render() {
        return (
            <div style={{ backgroundColor: '' }}>
                <Modal
                    visible={this.state.modal1}
                    transparent
                    maskClosable={false}
                    onClose={this.onClose('modal1')}
                    title="简介"
                    footer={[{ text: 'Ok', onPress: () => { console.log('ok'); this.onClose('modal1')(); } }]}
                    wrapProps={{ onTouchStart: this.onWrapTouchStart }}
                // afterClose={() => { alert('afterClose'); }}
                >
                    <div style={{ height: 100, }}>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate quibusdam explicabo voluptatem, dolorem laboriosam velit quisquam at ratione, ipsam ex voluptates, repudiandae labore tempora animi consectetur perferendis libero culpa ducimus.
                    </div>
                </Modal>
                <NavBar
                    mode='light'
                    leftContent={<Link to='/home'><LeftOutlined style={{ fontSize: 20, color: '#fff' }} /></Link>}
                    onLeftClick={() => console.log('onLeftClick')}
                    rightContent={
                        <Icon key="1" type="ellipsis" style={{ fontSize: 20, color: '#fff' }} />
                    }
                    style={{ background:'linear-gradient(to right, #240b36, #c31432)'}}
                >
                </NavBar>
                {/* <AppPage> */}
                    <div className='userdtlheaderContainer'>
                        <div style={{ height: '45px'}}></div>
                        <div className='header'>
                            <WingBlank size='lg'>
                                <div className='avatar'>
                                    <div className='avatar-top'>
                                        <Avatar size={60} icon={<UserOutlined />} />
                                        <div className='signin'>
                                            <CrownFilled />
                                            <div style={{ marginLeft: '1vw' }}>签到</div>
                                        </div>
                                    </div>
                                    <div className='avatar-bottom'>
                                        <div className='ab-un'>
                                            {/* <MyBadge /> */}
                                            <div style={{ fontSize: 16, fontWeight: 'bold', marginRight: '1.5vw', marginLeft: '1.5vw',color:'#fff' }}>萨达萨达萨达</div>
                                            <WomanOutlined style={{ color: 'red' }}></WomanOutlined>
                                        </div>
                                        <div style={{ marginTop: '1.5vh', width: '40vw' }}>
                                            <Progress barStyle={{}}  percent={this.state.percent} position="normal" />
                                            <span style={{color:'#fff'}}>199/500</span>
                                        </div>

                                    </div>


                                </div>
                            </WingBlank>

                            <div className='btngroup'>
                                <div className='btnItem'>
                                    <TeamOutlined></TeamOutlined>
                                    <div style={{ marginLeft: '1vw' }}>33粉丝</div>

                                </div>
                                <div className='btnItem'>
                                    <HeartFilled />
                                    <div style={{ marginLeft: '1vw' }}>10关注</div>
                                </div>
                                <div className='btnItem'></div>
                                <div className='btnItem'></div>
                                <div className='btnItem'></div>

                                <div className='btnItem' style={{ marginLeft: '0vw' }}>
                                <div className='follow'>
                                    <PlusOutlined style={{ marginRight: '1vw' }} />
                                关注
            </div>
                                </div>
                            </div>
                            <div style={{ width: '100%', height: '4vh', borderTopLeftRadius: '2vh', borderTopRightRadius: '2vh', backgroundColor: '#fff', marginTop: '1vh' }}></div>

                        </div>
                    </div>

                    <WingBlank>
                        {/* <div style={{fontSize:16,fontWeight:'bold',marginTop:'1vh'}}>基本资料</div> */}
                    </WingBlank>
                    <WhiteSpace />
                    <div className='contentheader'>
                        <WingBlank size='lg'>
                            <div className='concon'>
                                <div style={{ fontWeight: 'bold', color: '#636e72' }}>简介：</div>
                                <div className='userdtlfont'>xxxxxxxxxxx
                                Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed exercitationem tempore sint dicta cumque. Laudantium earum, explicabo possimus officiis est omnis accusantium tempore magni alias exercitationem sint! Minus, corporis beatae.
                            </div>
                                <EyeOutlined style={{ color: '#636e72' }} onClick={this.showModal('modal1')} />
                                <Link to='editor'>  <FormOutlined style={{ color: '#636e72' }} /> </Link>

                            </div>
                        </WingBlank>


                    </div>
                    <WhiteSpace size='lg'></WhiteSpace>
                    <div style={{ backgroundColor: '#F5F5F9' }}>

                        {/* <ContentCard></ContentCard>
                        <ContentCard></ContentCard>
                        <ContentCard></ContentCard>
                        <ContentCard></ContentCard>
                        <ContentCard></ContentCard> */}
                    </div>
                {/* </AppPage> */}

            </div>
        );
    }
}
